<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创新科技 - 引领未来</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        html {
            scroll-behavior: smooth;
        }
        
        body {
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }
        
        a {
            text-decoration: none;
            color: inherit;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        .btn {
            display: inline-block;
            padding: 0.8rem 2rem;
            background-color: #ff6b6b;
            color: white;
            border: none;
            border-radius: 30px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 3rem;
            color: #333;
            position: relative;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            width: 100px;
            height: 3px;
            background-color: #ff6b6b;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        /* 导航栏 */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #ffffff;
            padding: 1rem 5%;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: #ff6b6b;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 2rem;
            position: relative;
        }
        
        .nav-links a {
            font-weight: 500;
            transition: color 0.3s;
        }
        
        .nav-links a:hover {
            color: #ff6b6b;
        }
        
        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: #ff6b6b;
            transition: width 0.3s;
        }
        
        .nav-links a:hover::after {
            width: 100%;
        }
        
        .mobile-menu {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
        }
        
        /* 首页部分 */
        .hero {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 0 5%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            margin-top: 60px;
            position: relative;
            overflow: hidden;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" fill-opacity="1" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
            background-size: cover;
            background-position: bottom;
            z-index: 0;
        }
        
        .hero-content {
            position: relative;
            z-index: 1;
        }
        
        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            animation: fadeIn 1s ease-in;
        }
        
        .hero p {
            font-size: 1.2rem;
            max-width: 700px;
            margin-bottom: 2rem;
            animation: fadeIn 1.5s ease-in;
        }
        
        .cta-btn {
            padding: 0.8rem 2rem;
            background-color: #ff6b6b;
            color: white;
            border: none;
            border-radius: 30px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.3s, box-shadow 0.3s;
            animation: fadeIn 2s ease-in;
        }
        
        .cta-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        /* 特色部分 */
        .features {
            padding: 5rem 0;
            background-color: #ffffff;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }
        
        .feature-card {
            text-align: center;
            padding: 2rem;
            border-radius: 10px;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            color: #ff6b6b;
        }
        
        .feature-title {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: #333;
        }
        
        /* 产品展示部分 */
        .showcase {
            padding: 5rem 0;
            background-color: #f8f9fa;
        }
        
        .showcase-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }
        
        .showcase-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .showcase-img {
            width: 100%;
            height: 250px;
            background-color: #ddd;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #888;
            font-size: 1.2rem;
            transition: transform 0.5s;
        }
        
        .showcase-item:hover .showcase-img {
            transform: scale(1.1);
        }
        
        .showcase-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 1.5rem;
            transform: translateY(100%);
            transition: transform 0.3s;
        }
        
        .showcase-item:hover .showcase-overlay {
            transform: translateY(0);
        }
        
        .showcase-title {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
        }
        
        /* 客户评价部分 */
        .testimonials {
            padding: 5rem 0;
            background-color: #ffffff;
        }
        
        .testimonial-slider {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }
        
        .testimonial-item {
            text-align: center;
            padding: 2rem;
            display: none;
        }
        
        .testimonial-item.active {
            display: block;
            animation: fadeIn 0.5s ease-in;
        }
        
        .testimonial-text {
            font-size: 1.2rem;
            font-style: italic;
            margin-bottom: 1.5rem;
            color: #555;
        }
        
        .testimonial-author {
            font-weight: bold;
            color: #333;
        }
        
        .testimonial-company {
            color: #777;
        }
        
        .testimonial-nav {
            display: flex;
            justify-content: center;
            margin-top: 2rem;
        }
        
        .testimonial-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #ddd;
            margin: 0 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .testimonial-dot.active {
            background-color: #ff6b6b;
        }
        
        /* 新闻部分 */
        .news {
            padding: 5rem 0;
            background-color: #f8f9fa;
        }
        
        .news-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }
        
        .news-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }
        
        .news-card:hover {
            transform: translateY(-10px);
        }
        
        .news-img {
            width: 100%;
            height: 200px;
            background-color: #ddd;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #888;
            font-size: 1.2rem;
        }
        
        .news-content {
            padding: 1.5rem;
        }
        
        .news-date {
            color: #777;
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }
        
        .news-title {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: #333;
        }
        
        .news-excerpt {
            color: #666;
            margin-bottom: 1.5rem;
        }
        
        /* AI互动部分 */
        .ai-section {
            padding: 5rem 0;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
        }
        
        .ai-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }
        
        .ai-info {
            padding-right: 2rem;
        }
        
        .ai-info h3 {
            font-size: 2rem;
            margin-bottom: 1.5rem;
            color: #333;
        }
        
        .ai-info p {
            margin-bottom: 1.5rem;
            color: #666;
            font-size: 1.1rem;
        }
        
        .ai-features {
            margin-bottom: 2rem;
        }
        
        .ai-feature {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .ai-feature-icon {
            width: 40px;
            height: 40px;
            background-color: #ff6b6b;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            margin-right: 1rem;
            font-size: 1.2rem;
        }
        
        .ai-feature-text {
            font-size: 1.1rem;
            color: #555;
        }
        
        .ai-chat {
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        .ai-chat-header {
            background-color: #ff6b6b;
            color: white;
            padding: 1rem 1.5rem;
            display: flex;
            align-items: center;
        }
        
        .ai-avatar {
            width: 40px;
            height: 40px;
            background-color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 1rem;
            font-weight: bold;
            color: #ff6b6b;
        }
        
        .ai-name {
            font-size: 1.2rem;
            font-weight: 600;
        }
        
        .ai-chat-body {
            height: 300px;
            padding: 1.5rem;
            overflow-y: auto;
        }
        
        .chat-message {
            margin-bottom: 1rem;
            display: flex;
        }
        
        .user-message {
            justify-content: flex-end;
        }
        
        .ai-message {
            justify-content: flex-start;
        }
        
        .message-bubble {
            max-width: 80%;
            padding: 0.8rem 1.2rem;
            border-radius: 15px;
            font-size: 1rem;
        }
        
        .user-bubble {
            background-color: #ff6b6b;
            color: white;
            border-top-right-radius: 0;
        }
        
        .ai-bubble {
            background-color: #f0f2f5;
            color: #333;
            border-top-left-radius: 0;
        }
        
        .ai-chat-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid #eee;
            display: flex;
        }
        
        .ai-input {
            flex: 1;
            padding: 0.8rem 1.2rem;
            border: 1px solid #ddd;
            border-radius: 30px;
            font-size: 1rem;
            outline: none;
        }
        
        .ai-send-btn {
            background-color: #ff6b6b;
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            margin-left: 1rem;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.2rem;
            transition: background-color 0.3s;
        }
        
        .ai-send-btn:hover {
            background-color: #ff5252;
        }
        
        /* 联系部分 */
        .contact-preview {
            padding: 5rem 0;
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
            color: white;
            text-align: center;
        }
        
        .contact-title {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
        }
        
        .contact-text {
            max-width: 700px;
            margin: 0 auto 2rem;
            font-size: 1.2rem;
        }
        
        /* 页脚部分 */
        .footer {
            background-color: #333;
            color: white;
            padding: 3rem 5%;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
        }
        
        .footer-section h3 {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            position: relative;
        }
        
        .footer-section h3::after {
            content: '';
            position: absolute;
            width: 50px;
            height: 2px;
            background-color: #ff6b6b;
            bottom: -10px;
            left: 0;
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 0.8rem;
        }
        
        .footer-links a {
            transition: color 0.3s;
        }
        
        .footer-links a:hover {
            color: #ff6b6b;
        }
        
        .contact-info p {
            margin-bottom: 0.8rem;
        }
        
        .social-icons {
            display: flex;
            margin-top: 1.5rem;
        }
        
        .social-icon {
            width: 40px;
            height: 40px;
            background-color: #444;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 1rem;
            transition: background-color 0.3s;
        }
        
        .social-icon:hover {
            background-color: #ff6b6b;
        }
        
        .copyright {
            text-align: center;
            padding-top: 2rem;
            margin-top: 2rem;
            border-top: 1px solid #444;
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .navbar {
                padding: 1rem 5%;
            }
            
            .nav-links {
                position: fixed;
                top: 60px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 60px);
                background-color: white;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                padding-top: 2rem;
                transition: left 0.3s;
            }
            
            .nav-links.active {
                left: 0;
            }
            
            .nav-links li {
                margin: 1.5rem 0;
            }
            
            .mobile-menu {
                display: block;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .ai-container {
                grid-template-columns: 1fr;
            }
            
            .ai-info {
                padding-right: 0;
                order: 1;
            }
            
            .ai-chat {
                order: 0;
                margin-bottom: 2rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="logo">创新科技</div>
        <ul class="nav-links" id="navLinks">
            <li><a href="index.html">首页</a></li>
            <li><a href="history.html">公司历程</a></li>
            <li><a href="products.html">产品详情</a></li>
            <li><a href="about.html">关于我们</a></li>
            <li><a href="contact.html">联系我们</a></li>
        </ul>
        <div class="mobile-menu" id="mobileMenu">☰</div>
    </nav>

    <!-- 首页部分 -->
    <section class="hero" id="home">
        <div class="hero-content">
            <h1>引领科技创新的未来</h1>
            <p>我们致力于为用户提供最前沿的科技产品和解决方案，让科技改变生活，让创新引领未来。</p>
            <a href="products.html" class="cta-btn">探索产品</a>
        </div>
    </section>

    <!-- 特色部分 -->
    <section class="features">
        <div class="container">
            <h2 class="section-title">我们的优势</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">🚀</div>
                    <h3 class="feature-title">创新技术</h3>
                    <p>我们不断探索前沿技术，将最新的科技成果应用到产品中，为用户带来全新的体验。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">💡</div>
                    <h3 class="feature-title">智能解决方案</h3>
                    <p>针对不同场景和需求，我们提供定制化的智能解决方案，帮助用户解决实际问题。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🔒</div>
                    <h3 class="feature-title">安全保障</h3>
                    <p>我们高度重视用户隐私和数据安全，采用多重加密技术，确保用户信息的安全。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 产品展示部分 -->
    <section class="showcase">
        <div class="container">
            <h2 class="section-title">热门产品</h2>
            <div class="showcase-grid">
                <div class="showcase-item">
                    <div class="showcase-img">智能手表产品图片</div>
                    <div class="showcase-overlay">
                        <h3 class="showcase-title">智能手表 Pro</h3>
                        <p>全新一代智能手表，支持健康监测、运动追踪、智能提醒等多种功能。</p>
                        <a href="products.html" class="btn">了解更多</a>
                    </div>
                </div>
                <div class="showcase-item">
                    <div class="showcase-img">智能音箱产品图片</div>
                    <div class="showcase-overlay">
                        <h3 class="showcase-title">智能音箱 Mini</h3>
                        <p>小巧精致的智能音箱，支持语音控制、智能家居连接、高品质音频播放。</p>
                        <a href="products.html" class="btn">了解更多</a>
                    </div>
                </div>
                <div class="showcase-item">
                    <div class="showcase-img">无线耳机产品图片</div>
                    <div class="showcase-overlay">
                        <h3 class="showcase-title">无线耳机 Air</h3>
                        <p>采用最新降噪技术，提供出色的音质和舒适的佩戴体验。</p>
                        <a href="products.html" class="btn">了解更多</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 客户评价部分 -->
    <section class="testimonials">
        <div class="container">
            <h2 class="section-title">客户评价</h2>
            <div class="testimonial-slider">
                <div class="testimonial-item active">
                    <p class="testimonial-text">"创新科技的智能手表改变了我的生活方式，健康监测功能帮助我更好地了解自己的身体状况，运动数据分析让我的锻炼更有针对性。"</p>
                    <p class="testimonial-author">张先生</p>
                    <p class="testimonial-company">健身教练</p>
                </div>
                <div class="testimonial-item">
                    <p class="testimonial-text">"作为一名音乐爱好者，创新科技的无线耳机给我带来了前所未有的听觉体验，降噪效果出色，音质清晰，佩戴舒适。"</p>
                    <p class="testimonial-author">李女士</p>
                    <p class="testimonial-company">音乐制作人</p>
                </div>
                <div class="testimonial-item">
                    <p class="testimonial-text">"智能家居套装让我的家庭更加智能化，通过手机就能控制家中的各种设备，既方便又节能，是现代家庭的必备产品。"</p>
                    <p class="testimonial-author">王先生</p>
                    <p class="testimonial-company">建筑师</p>
                </div>
                <div class="testimonial-nav">
                    <div class="testimonial-dot active" data-index="0"></div>
                    <div class="testimonial-dot" data-index="1"></div>
                    <div class="testimonial-dot" data-index="2"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- 新闻部分 -->
    <section class="news">
        <div class="container">
            <h2 class="section-title">最新动态</h2>
            <div class="news-grid">
                <div class="news-card">
                    <div class="news-img">新闻图片</div>
                    <div class="news-content">
                        <p class="news-date">2023年10月15日</p>
                        <h3 class="news-title">创新科技发布全新智能手表系列</h3>
                        <p class="news-excerpt">近日，创新科技正式发布了全新一代智能手表系列，包括标准版、运动版和豪华版三种型号，满足不同用户的需求。</p>
                        <a href="#" class="btn">阅读更多</a>
                    </div>
                </div>
                <div class="news-card">
                    <div class="news-img">新闻图片</div>
                    <div class="news-content">
                        <p class="news-date">2023年9月28日</p>
                        <h3 class="news-title">创新科技获得年度科技创新奖</h3>
                        <p class="news-excerpt">在近日举行的2023年度科技创新大会上，创新科技凭借在人工智能领域的突出贡献，获得了年度科技创新奖。</p>
                        <a href="#" class="btn">阅读更多</a>
                    </div>
                </div>
                <div class="news-card">
                    <div class="news-img">新闻图片</div>
                    <div class="news-content">
                        <p class="news-date">2023年9月10日</p>
                        <h3 class="news-title">创新科技与多家企业达成战略合作</h3>
                        <p class="news-excerpt">创新科技近日与多家知名企业签署战略合作协议，共同推进智能家居、人工智能等领域的技术研发和市场推广。</p>
                        <a href="#" class="btn">阅读更多</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- AI互动部分 - Deepseek集成 -->
    <section class="ai-section" id="ai-assistant">
        <div class="container">
            <h2 class="section-title">AI智能助手</h2>
            <div class="ai-container">
                <div class="ai-info">
                    <h3>体验Deepseek AI的强大能力</h3>
                    <p>我们与Deepseek AI合作，为您提供智能、高效的AI助手服务。无论是产品咨询、技术支持还是创意灵感，Deepseek AI都能为您提供专业的解答。</p>
                    <div class="ai-features">
                        <div class="ai-feature">
                            <div class="ai-feature-icon">✓</div>
                            <div class="ai-feature-text">智能问答，即时响应您的各类问题</div>
                        </div>
                        <div class="ai-feature">
                            <div class="ai-feature-icon">✓</div>
                            <div class="ai-feature-text">产品推荐，根据您的需求提供个性化建议</div>
                        </div>
                        <div class="ai-feature">
                            <div class="ai-feature-icon">✓</div>
                            <div class="ai-feature-text">技术支持，解决您在使用过程中遇到的问题</div>
                        </div>
                        <div class="ai-feature">
                            <div class="ai-feature-icon">✓</div>
                            <div class="ai-feature-text">创意助手，激发您的创新思维</div>
                        </div>
                    </div>
                    <a href="#" class="btn">了解更多AI功能</a>
                </div>
                <div class="ai-chat">
                    <div class="ai-chat-header">
                        <div class="ai-avatar">AI</div>
                        <div class="ai-name">Deepseek 智能助手</div>
                    </div>
                    <div class="ai-chat-body" id="chatBody">
                        <div class="chat-message ai-message">
                            <div class="message-bubble ai-bubble">
                                您好！我是创新科技的Deepseek AI助手，很高兴为您服务。请问有什么可以帮助您的吗？
                            </div>
                        </div>
                        <!-- 聊天消息将在这里动态添加 -->
                    </div>
                    <div class="ai-chat-footer">
                        <input type="text" class="ai-input" id="userInput" placeholder="请输入您的问题..." />
                        <button class="ai-send-btn" id="sendBtn">➤</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系部分 -->
    <section class="contact-preview">
        <div class="container">
            <h2 class="contact-title">联系我们</h2>
            <p class="contact-text">无论您有任何问题、建议或合作意向，都欢迎随时与我们联系。我们的专业团队将为您提供最优质的服务和解决方案。</p>
            <a href="contact.html" class="btn">立即联系</a>
        </div>
    </section>

    <!-- 页脚部分 -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-section">
                <h3>关于我们</h3>
                <p>创新科技是一家专注于智能硬件和软件开发的科技公司，致力于为用户提供最前沿的科技产品和解决方案。</p>
            </div>
            <div class="footer-section">
                <h3>快速链接</h3>
                <ul class="footer-links">
                    <li><a href="index.html">首页</a></li>
                    <li><a href="history.html">公司历程</a></li>
                    <li><a href="products.html">产品详情</a></li>
                    <li><a href="about.html">关于我们</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>联系我们</h3>
                <div class="contact-info">
                    <p>地址：北京市海淀区科技园区88号</p>
                    <p>电话：400-123-4567</p>
                    <p>邮箱：info@innovtech.com</p>
                </div>
                <div class="social-icons">
                    <a href="#" class="social-icon">微信</a>
                    <a href="#" class="social-icon">微博</a>
                    <a href="#" class="social-icon">抖音</a>
                </div>
            </div>
        </div>
        <div class="copyright">
            <p>&copy; 2023 创新科技 版权所有</p>
        </div>
    </footer>

    <!-- JavaScript -->
     <script src="./js/ai-chat.js"></script>
    <script>
        // 移动端菜单切换
        const mobileMenu = document.getElementById('mobileMenu');
        const navLinks = document.getElementById('navLinks');
        
        mobileMenu.addEventListener('click', () => {
            navLinks.classList.toggle('active');
        });
        
        // 客户评价轮播
        const testimonialItems = document.querySelectorAll('.testimonial-item');
        const testimonialDots = document.querySelectorAll('.testimonial-dot');
        let currentTestimonial = 0;
        
        function showTestimonial(index) {
            testimonialItems.forEach(item => item.classList.remove('active'));
            testimonialDots.forEach(dot => dot.classList.remove('active'));
            
            testimonialItems[index].classList.add('active');
            testimonialDots[index].classList.add('active');
            currentTestimonial = index;
        }
        
        testimonialDots.forEach(dot => {
            dot.addEventListener('click', () => {
                const index = parseInt(dot.getAttribute('data-index'));
                showTestimonial(index);
            });
        });
        
        // 自动轮播
        setInterval(() => {
            currentTestimonial = (currentTestimonial + 1) % testimonialItems.length;
            showTestimonial(currentTestimonial);
        }, 5000);
        const aiChat = new AIChatWidget({
            apiUrl: 'https://api.deepseek.com/v1/chat/completions',
            apiKey: 'sk-980ecc7694e14620a29b5d679a3d1c05', // 请替换为您的实际API密钥
        })
        // Deepseek AI聊天功能
        // const chatBody = document.getElementById('chatBody');
        // const userInput = document.getElementById('userInput');
        // const sendBtn = document.getElementById('sendBtn');
        
        // // Deepseek API配置
        // const DEEPSEEK_API_URL = 'https://api.deepseek.com/v1/chat/completions';
        // const DEEPSEEK_API_KEY = 'sk-980ecc7694e14620a29b5d679a3d1c05'; // 请替换为您的实际API密钥
        
        // // 添加用户消息
        // function addUserMessage(message) {
        //     const messageDiv = document.createElement('div');
        //     messageDiv.className = 'chat-message user-message';
        //     messageDiv.innerHTML = `
        //         <div class="message-bubble user-bubble">
        //             ${message}
        //         </div>
        //     `;
        //     chatBody.appendChild(messageDiv);
        //     chatBody.scrollTop = chatBody.scrollHeight;
        // }
        
        // // 添加AI消息容器（用于流式响应）
        // function createAIMessageContainer() {
        //     const messageDiv = document.createElement('div');
        //     messageDiv.className = 'chat-message ai-message';
            
        //     const bubbleDiv = document.createElement('div');
        //     bubbleDiv.className = 'message-bubble ai-bubble';
        //     messageDiv.appendChild(bubbleDiv);
            
        //     chatBody.appendChild(messageDiv);
        //     chatBody.scrollTop = chatBody.scrollHeight;
            
        //     return bubbleDiv;
        // }
        
        // // 解析SSE数据
        // function parseSSEData(data) {
        //     if (data === '[DONE]') return { done: true };
            
        //     try {
        //         const parsedData = JSON.parse(data);
        //         return {
        //             done: false,
        //             content: parsedData.choices[0].delta.content || ''
        //         };
        //     } catch (error) {
        //         console.error('解析SSE数据时出错:', error);
        //         return { done: false, content: '' };
        //     }
        // }
        
        // // 获取AI回复 - 使用流式响应
        // async function getAIStreamResponse(userMessage, messageContainer) {
        //     try {
        //         // 准备发送到Deepseek API的请求
        //         const requestData = {
        //             model: 'deepseek-chat', // 使用适当的模型名称
        //             messages: [
        //                 {
        //                     role: 'system',
        //                     content: '你是创新科技的AI助手，负责回答用户关于公司产品和服务的问题。公司产品包括智能手表、智能音箱和无线耳机等。请提供专业、友好的回答。'
        //                 },
        //                 {
        //                     role: 'user',
        //                     content: userMessage
        //                 }
        //             ],
        //             temperature: 0.7,
        //             max_tokens: 500,
        //             stream: true // 启用流式响应
        //         };
                
        //         // 调用Deepseek API
        //         const response = await fetch(DEEPSEEK_API_URL, {
        //             method: 'POST',
        //             headers: {
        //                 'Content-Type': 'application/json',
        //                 'Authorization': `Bearer ${DEEPSEEK_API_KEY}`,
        //                 'Accept': 'text/event-stream'
        //             },
        //             body: JSON.stringify(requestData)
        //         });
                
        //         if (!response.ok) {
        //             throw new Error(`API调用失败: ${response.status}`);
        //         }
                
        //         // 处理流式响应
        //         const reader = response.body.getReader();
        //         const decoder = new TextDecoder('utf-8');
        //         let buffer = '';
                
        //         while (true) {
        //             const { done, value } = await reader.read();
                    
        //             if (done) {
        //                 break;
        //             }
                    
        //             // 解码接收到的数据
        //             const chunk = decoder.decode(value, { stream: true });
        //             buffer += chunk;
                    
        //             // 处理接收到的数据行
        //             const lines = buffer.split('\n');
        //             buffer = lines.pop() || ''; // 保留最后一个不完整的行
                    
        //             for (const line of lines) {
        //                 if (line.trim() === '') continue;
        //                 if (!line.startsWith('data:')) continue;
                        
        //                 const data = line.slice(5).trim();
        //                 const parsedData = parseSSEData(data);
                        
        //                 if (parsedData.done) {
        //                     continue;
        //                 }
                        
        //                 if (parsedData.content) {
        //                     // 将内容添加到消息容器
        //                     messageContainer.textContent += parsedData.content;
        //                     chatBody.scrollTop = chatBody.scrollHeight;
        //                 }
        //             }
        //         }
                
        //     } catch (error) {
        //         console.error('调用Deepseek API时出错:', error);
        //         messageContainer.textContent += '\n\n抱歉，我暂时无法回答您的问题。请稍后再试或联系客服。';
        //         chatBody.scrollTop = chatBody.scrollHeight;
        //     }
        // }
        
        // // 发送消息
        // async function sendMessage() {
        //     const message = userInput.value.trim();
        //     if (message) {
        //         // 添加用户消息
        //         addUserMessage(message);
        //         userInput.value = '';
                
        //         // 创建AI消息容器
        //         const aiMessageContainer = createAIMessageContainer();
                
        //         // 获取流式AI回复
        //         await getAIStreamResponse(message, aiMessageContainer);
        //     }
        // }
        
        // // 绑定发送按钮点击事件
        // sendBtn.addEventListener('click', sendMessage);
        
        // // 绑定输入框回车事件
        // userInput.addEventListener('keypress', (e) => {
        //     if (e.key === 'Enter') {
        //         sendMessage();
        //     }
        // });
        
        // 滚动动画
        window.addEventListener('scroll', () => {
            const reveals = document.querySelectorAll('.feature-card, .showcase-item, .news-card, .ai-container');
            
            for (let i = 0; i < reveals.length; i++) {
                const windowHeight = window.innerHeight;
                const elementTop = reveals[i].getBoundingClientRect().top;
                const elementVisible = 150;
                
                if (elementTop < windowHeight - elementVisible) {
                    reveals[i].style.opacity = '1';
                    reveals[i].style.transform = 'translateY(0)';
                } else {
                    reveals[i].style.opacity = '0';
                    reveals[i].style.transform = 'translateY(20px)';
                }
            }
        });
        
        // 初始化
        window.onload = () => {
            // 设置初始透明度
            const reveals = document.querySelectorAll('.feature-card, .showcase-item, .news-card, .ai-container');
            for (let i = 0; i < reveals.length; i++) {
                reveals[i].style.opacity = '0';
                reveals[i].style.transform = 'translateY(20px)';
                reveals[i].style.transition = 'opacity 0.6s ease, transform 0.6s ease';
            }
            
            // 触发滚动事件以显示可见元素
            window.dispatchEvent(new Event('scroll'));
        };
    </script>
</body>
</html>